<template>
    <div class="header-wrapper">
        <div class="logo-box">国泰网信</div>
        <div class="center-box">
            <slot name="centerContent"></slot>
        </div>
        <div class="right-box">
            <el-button type="primary" @click="clickToggleLayout"
                >切换布局</el-button
            >
            <el-button
                type="primary"
                class="theme-btn"
                @click="clickToggleTheme"
                >切换皮肤</el-button
            >
            <el-button type="danger" @click="clickLogout">退出</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { ElMessageBox } from "element-plus";
import { useLayoutStore, usePermissionStore, useUserStore } from "@/stores";
import { useRouter } from "vue-router";
const router = useRouter();
const layoutStoreData = useLayoutStore();
const permissionStoreData = usePermissionStore();
const userStoreData = useUserStore();
const { menuMode, theme } = storeToRefs(layoutStoreData);
const clickToggleLayout = () => {
    const newMenuMode =
        menuMode.value === "vertical" ? "horizontal" : "vertical";
    layoutStoreData.setMenuMode(newMenuMode);
};
const clickToggleTheme = () => {
    const newTheme = theme.value === "dark" ? "light" : "dark";
    layoutStoreData.setTheme(newTheme);
    document.documentElement.setAttribute("data-theme", newTheme);
};
const resetStore = () => {
    const storeList = [layoutStoreData, permissionStoreData, userStoreData];
    storeList.forEach((store) => store.$reset());
};
const clickLogout = () => {
    ElMessageBox.confirm("确认退出系统?", "Warning", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
    })
        .then(() => {
            localStorage.removeItem("ACCESS_TOKEN");
            localStorage.setItem("IS_RELOAD", "pageReload");
            document.documentElement.setAttribute("data-theme", "dark");
            router.push({ path: "/login" });
            resetStore();
        })
        .catch(() => {});
};
</script>

<style lang="scss" scoped>
.header-wrapper {
    height: 100%;
    display: flex;
    .logo-box {
        width: 201px;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        color: #fff;
    }
    .center-box {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .right-box {
        display: flex;
        align-items: center;
        margin-left: auto;
        .theme-btn {
            margin: 0 20px;
        }
    }
}
</style>
